<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引用字体图标库 -->
		<link rel="stylesheet" type="text/css" href="./font/iconfont.css"/>
		<style type="text/css">
			.myflex{border: 1px solid #ccc;display: flex;margin-top:10px ;}
			.icon-fanhui{font-size: 20px;}
			ul>li{list-style: none;}
			/* 设置组件三部分内容各占多少 */
			.m-l{width: 15%; height: 50px;}
			.m-c{width: 70%; height: 50px;}
			.m-r{width: 15%; height: 50px;}
			.mc{display: flex;justify-content: space-around;align-items: center;			}
			.myli{width: 40px;position: relative;left: -20px;text-align: center;line-height: 2;}			
			.active{border-bottom:3px solid rgb(253,122,122) ;color: red;font-weight: 600;}
			.myinput{background-color: #eee;border: none;outline: none;width: 80%;}
			.product{display: flex;align-items: center;width: 100%;height: 35px;background-color: #eee;border-radius: 20px;padding: 0 20px;}
			#end{background-color: red;}
			#over-three{background-color: red;border:none;font-size: 16px;text-align: center;line-height:40px;color:#fff;outline:none;}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<nav-bar></nav-bar>
			<!-- 商品 -->
			<nav-bar>
				<ul slot="center" class="mc" style="width: 100%;">
					<li 
					class="myli" :class="{active:current==index}"
					@click="current=index"
					v-for="(val,index) in arr">
						{{val}}
					</li>
				</ul>
			</nav-bar>			
			<!-- 带有搜索框 -->
			<nav-bar :ishow="false">
			   <div slot="center" class="product">
				   <i class="iconfont icon-fangdajing"></i>
				   <input type="text" placeholder="蚕丝被" class="myinput" />
			   </div>
			</nav-bar>
			<!-- 不有的搜索框 -->
			<nav-bar id="end">
				<div slot="center" class="product">
					<i class="iconfont icon-fangdajing"></i>
					<input type="text" placeholder="蚕丝被" class="myinput" />					
				</div>
				<div slot="right">
					<button id="over-three">登录</button>
				</div>
			 </nav-bar>
		</div>		
		<!-- 组件模板 -->
		<template id="mynav">
			<div class="myflex">
				<!-- <h1>这是navbar组件</h1> -->				
				<!-- 左侧 -->
				<div class="m-l mc">
					<slot name="left">
						<i class="iconfont icon-fanhui"></i>
					</slot>
				</div>
				<!-- 中间-->
				<div class="m-c mc">
					<slot name="center">
						<span>购物车</span>
					</slot>			
				</div>
				<!-- 右侧 -->
				<div class="m-r mc" v-if="ishow">
					<slot name="right">
						<i class="iconfont icon-gengduo1"></i>
					</slot>
				</div>
			</div>
		</template>		
		<!-- 引入vuejs库 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">			
	    // 注册全局组件
		Vue.component("nav-bar",{//组件选项对象
			template:'#mynav',
			props:{
				ishow:{
					default:true
				}
			}			
		})			
		// 创建Vue实例
		new Vue({
			el:'#app',
			data:{
				arr:["商品","评价","详情","推荐"],
				current:0
			},
		})
		</script>
	</body>
</html>